@import '../global.config.less';
@sidebar_width: 300px;
@avatar_len:80px;
@head_span_padding:10px;
@drop_down_li_pad:15px;
@fix_pad:8px;

// 一个列表单个子项的样式
.li-item{
  list-style: none;
  padding: @drop_down_li_pad;
  color: @text;
  border-bottom: 1px solid @grey;
  &.active{
    color: @light_bg;
  }
  &:hover{
    cursor: pointer;
    background-color: @hover_bg;
  }
}

// 顶部
:local(.header){
  //height: @headerHeight;
  color: @text;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 5px fadeout(@dark_bg,@alpha);
  &>*{
    padding: @head_span_padding;
    i:hover{
      cursor: pointer;
    }
  }

  & ~ div{
    li{
      .li-item
    }
    position: absolute;
    top:@header_height;
    background-color: fadeout(@dark_bg,5%);
    color:darken(@text,1%);
  }

  div:last-child{
    span:first-child{
      margin-right: @fix_pad;
    }
  }

}

// dropdown-加入/创建团队
:local(.plus){
  right: 0;
}

// dropdown-社团内功能模块切换器
:local(.sidebar){
  transition: .3s all linear;

  li:first-child{
    &:hover{cursor: default}
    background: linear-gradient(to top left,lighten(@dark_bg,5%),fadeout(@dark_bg,5%));
    .top{
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      &-left{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        img{
          width: @avatar_len;
          height: @avatar_len;
          border-radius: 50%;
          box-shadow: @box_shadow;
          margin-bottom: 10px;
        }
        span{
          transition: .8s color linear;
          &:hover{color: @light_bg;}
        }
      }

      &-mid{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: @avatar_len;
        margin-left: 15px;

        .fa-diamond{
          color: #e9e225;
        }
      }

      &-right{
        cursor: pointer;
        color: lighten(@grey,10%);
        &:hover{color: @text;}
      }
    } // end top

    .join-time{
      font-size: .8em;
      color:lighten(@grey,10%);
    }
  };

  & li.active{
    color: @light_bg;
  }

  // 左侧滑入动画
  &.ng-enter,&.ng-hide-remove{
    left: -@sidebar_width;

    &-active{
      left:0;
    }
  }

  &.ng-leave,&.ng-hide-add{
    left: 0;

    &-active{
      left:-@sidebar_width;
    }
  }

}

// dropdown-社团切换
:local(.clubs){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

// dropdown-社团内消息
:local(.dynamics){
  right: 0;
  i{color: @text}
  .timestamp{
    color: @primary;
    font-size: 0.8em;
  }
}